// 默认主题
html {
  --im-primary-color: #1890ff;
  --im-bg-color: #ffffff;
  --border-color: #eeeaea;
  --im-text-color: #333;
  --im-text-color-grey: #a5a0a0;
  --im-active-bg-color: #f5f5f5;
  --im-hover-bg-color: #f5f5f5;

  // 滚动条
  --im-scrollbar: #e4e4e5;
  --im-scrollbar-thumb: #c0bebc;

  // message
  --im-message-bg-color: #f7f7f7;
  --im-message-border-color: #efeff5;
  --im-message-left-bg-color: rgba(46, 50, 56, 0.05);
  --im-message-left-text-color: #333;
  --im-message-left-link-text-color: #1890ff;

  --im-message-right-bg-color: #daf3fd;
  --im-message-right-text-color: #333;
  --im-message-right-link-text-color: #1890ff;

  --chat-assistant-bg-color: rgba(46, 50, 56, 0.05);
  --chat-user-bg-color: #daf3fd;
  --chat-bg-grey-color: rgba(46, 50, 56, 0.05);

  --note-list-active-bg-color: #e5e6eb;
}

// 黑色主题
html[theme-mode='dark'] {
  --im-primary-color: #1890ff;
  --im-bg-color: #0a0a0a;
  --border-color: rgb(245 245 240 / 10%);
  --im-text-color: rgba(255, 255, 255, 0.82);
  --im-text-color-grey: rgba(255, 255, 255, 0.52);
  --im-active-bg-color: #2c2c32;
  --im-hover-bg-color: #2c2c32;

  // 滚动条
  --im-scrollbar: transparent;
  --im-scrollbar-thumb: #707073;

  // message
  --im-message-bg-color: #363636;
  --im-message-border-color: rgba(255, 255, 255, 0.09);
  --im-message-left-bg-color: #474747;
  --im-message-left-text-color: var(--im-text-color);
  --im-message-left-link-text-color: #1890ff;

  --im-message-right-bg-color: rgb(84 169 255);
  --im-message-right-text-color: #e4e7f5;
  --im-message-right-link-text-color: #1890ff;

  --chat-assistant-bg-color: rgba(255, 255, 255, 0.12);
  --chat-user-bg-color: rgba(255, 255, 255, 0.12);
  --chat-bg-grey-color: rgba(255, 255, 255, 0.12);

  --note-list-active-bg-color: rgba(255, 255, 255, 0.1);

  ::selection {
    background: #d3d3d3;
    color: #555;
  }
  ::-moz-selection {
    background: #d3d3d3;
    color: #555;
  }
  ::-webkit-selection {
    background: #d3d3d3;
    color: #555;
  }
}

body {
  background-color: var(--im-bg-color);
}

.md-editor {
  --md-scrollbar-bg-color: transparent !important;
  --md-scrollbar-thumb-color: transparent !important;

  &:hover {
    --md-scrollbar-thumb-color: #c0bebc !important;
  }
}

.md-editor-dark {
  --md-bk-color: var(--im-bg-color) !important;

  &:hover {
    --md-scrollbar-thumb-color: #848281 !important;
  }
}
